<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css">
<script src="../../lib/layui-v2.5.5/layui.all.js"></script>

<style>
    .layui-top-box {padding:20px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
</style>


<div class="layuimini-container layuimini-page-anim">
    <!--<div class="hot" style="margin: 10px"><p style="color: red;font-size: 40px">热门推荐</p></div>-->
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10" id="main1">

        </div>
    </div>

    <script type="text/html" id="testTpl">
        {{# for(var i=0;i< d.list.length;i++){ }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{ d.list[i].date }}</h3>
                <p>
                    {{ d.list[i].content }}
                </p>
            </div>
        </li>
        {{# } }}

        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>
    </script>

    <!--<div class="layui-col-md18" >-->
    <!--<ul class="layui-timeline">-->

    <!--<div id="testDiv"></div>-->

    <!--</ul>-->
    <!--</div>-->
</div>


<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //***************************建造实例
        var ins=carousel.render({
            elem: '#test1'
            , width: '100%'     //设置容器宽度
            , arrow: 'always'    //始终显示箭头，可选hover,none
            //,anim: 'updown'    //切换动画方式，可选fade,default
            , full: false        //全屏
            , autoplay: true     //自动切换
            , interval: 4000     //自动切换的时间间隔
            , index: 3           //初始化时item索引,默认时0
            , indicator:'inside' //指示器位置，可选outside,none
        });

        //**************************监听轮播切换事件
        carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            // console.log(obj.index);     //当前条目的索引
            // console.log(obj.prevIndex); //上一个条目的索引
            // console.log(obj.item);      //当前条目的元素对象
        });

        //****************************重置轮播
        //var ins = carousel.render(options);
        ins.reload({arrow:'hover'});//将arror从alway变成hover
    });
    var num = window.location.href.indexOf("?")
    console.log(window.location.href);
    var id = location.href.substr(num + 4);
    layui.use('laytpl',function(){

        var $ = layui.jquery,
            laytpl = layui.laytpl;
        var str1 = '';
        console.log(location.hash);
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  // 匹配目标参数
            if (r != null) return unescape(r[2]); return null; // 返回参数值
        };


        $.ajax({
            url:'http://localhost:8888/houses/queryHouseAll',
            dataType:'json',
            type:'get',
            success:function(data){
                console.log(data.data);
                $.each(data.data,function (i,item) {
                    console.log(item)
                    if (id == item.id){
                    str1 +=`<div class="layui-col-md3">
                                    <div class="col-xs-6 col-md-3">
                                        <div class="panel layui-bg-orange">
                                            <div class="panel-body">
                                                <div class="panel-title">
                                                <img src="../../${item.imgs}" width="70%" style="margin: 5px">
                                                    <span class="label pull-right layui-bg-green">${item.area}m²</span>

                                                    <span class="label pull-right layui-bg-green">￥${item.price}</span>
                                                    <h5 id="house_title">${item.city} ${item.county} ${item.address}  </h5>
                                                </div>
                                                <div class="panel-content">

                                                <h1 class="no-margins"><span id="wx"></span></h1>

                                <div class="stat-percent font-bold text-gray"></div>
                            </div>
                        </div>
                    </div><p style="color: black">${item.remarks}</p>
                </div>
            </div>`}

                    $('#main1').html(str1);
                })
            }
        });
        //遍历公告数据
        // $.ajax({
        //     url:SURL+'index/queryNoticeAll',
        //     dataType:'json',
        //     type:'post',
        //     success:function(res){
        //         var gettpl=document.getElementById("testTpl").innerHTML;
        //         laytpl(gettpl).render(res,function(html){
        //               document.getElementById("testDiv").innerHTML=html;
        //         })
        //     }
        // })

    })
</script>


